<template>
  <div id="components-form-demo-advanced-search">
    <a-form :form="queryForm" @submit="handleSearch">
      <a-row :gutter="24">
        <a-col
          v-for="i in 10"
          :key="i"
          :span="8"
          :style="{ display: i < count ? 'block' : 'none' }"
        >
          <a-form-item :label="`Field ${i}`" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-input
              v-decorator="[
                `field-${i}`,
                {
                  rules: [
                    {
                      required: true,
                      message: 'Input something!',
                    },
                  ],
                },
              ]"
              placeholder="placeholder"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit">查找</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">重置</a-button>
          <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
            {{expand?'收起':'展开'}}
            <a-icon :type="expand ? 'up' : 'down'" />
          </a>
        </a-col>
      </a-row>
    </a-form>
    <a-table :columns="columns" :dataSource="base.results" :rowKey="columns[0].key"></a-table>
  </div>
</template>

<script>
import base from "@/mixins";
import { Row, Col, Form, Input, Button, Icon, Table } from "ant-design-vue";

export default {
  mixins: [base],

  data() {
    return {
      expand: false,
      queryForm: this.$form.createForm(this, { name: 'advanced_search' }),
      columns: [
        { key: 'username', title: '用户名', dataIndex: 'username' },
        { key: 'url', title: '链接', dataIndex: 'url' },
        { key: 'email', title: '邮箱', dataIndex: 'email' },
      ]
    }
  },

  computed: {
    count() {
      return this.expand ? 11 : 4;
    },
  },

  components: {
    ARow: Row,
    ACol: Col,
    AForm: Form,
    AFormItem: Form.Item,
    AInput: Input,
    AButton: Button,
    AIcon: Icon,
    ATable: Table,
  },

  methods: {
    handleSearch(e) {
      e.preventDefault();
      this.queryForm.validateFields((error, values) => {
        console.log('error', error);
        console.log('Received values of form: ', values);
      });
    },

    handleReset() {
      this.form.resetFields();
    },

    toggle() {
      this.expand = !this.expand;
    },

  },

  mounted() {
  }
};
</script>

<style>

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
.m-t-20 {
  margin-top: 20px;
}
</style>
